JQ總務處｜選擇器與方法｜深入淺出jQuery

#jq #jq總務處 #深入淺出 jQuery #click #variable #floor #random #append #prepend #$(this) #remove #empty #slideUp #slideDown #slideToggle #fadeIn #fadeOut #fadeToggle #fadeTo

Posted by itiswonderfall on 2022-05-19

前言

接下來終於開始進入實作練習，否則看第一章時真的有點想睡哈哈哈，第一個需求是：

『 頁面要有四個區塊，每個區塊各具有四張圖，我需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ），當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方，如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。 』

 

整理一下需求清單

☐ 頁面要有四個區塊，每個區塊各具有四張圖。
☐ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

那我們就先把 HTML 跟 CSS 做出來吧

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Jump for joy Sale</title>
    </head>
    <body>
        <div id="header">
            <h2>Jump for joy Sale</h2>
        </div>
        <div id="main">
            <div><img src="images/jump1.jpg" alt=""></div>
            <div><img src="images/jump2.jpg" alt=""></div>
            <div><img src="images/jump3.jpg" alt=""></div>
            <div><img src="images/jump4.jpg" alt=""></div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </body>
</html>

CSS

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    div {
        float: left;
        text-align: left;
    }
    #header {
        width: 100%;
        border: 0;
        height: 50px;
    }
    #main {
        background-color: #ddd;
        height: 650px;
    }
    #main div {
        max-width: calc(25% - 6px);
        border: 3px solid #000;
    }
    img {
        max-width: 100%;
        vertical-align: middle;
    }
</style>

（ 圖片來源 — 低角度攝影的人跳、在藍天下跳躍的女人、半空中跳躍、女人跳 ）

 

檢視需求清單，目前進度是

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☐ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

開始來探究點擊（ click ）事件

為頁面添加 click 方法：

function

  1. 包含 jQuery 程式庫的標籤
  2. 確認頁面已經準備好進行互動
  3. 想要將點擊事件附加在哪個元素上
  4. 告訴 JS 直譯器元素在被點擊（ click ）時做某事
  5. 函式是一種將我們想做的事情集合起來的機制
  6. 用大括號 { } 來包含程式碼區塊（ code block ）
  7. 因為它位在點擊動作的小括號中 ( ) ，該函式就會在點擊被觸發時開始執行

 

<script> 標籤為什麼要在 </body> 標籤之前？

過去大家都認為在 <head> 與 </head> 之間是最佳實務建議，不過指令稿所引發的問題是它們會阻斷瀏覽器裡頭的平行下載，來自不同伺服器的圖像可能同時間被下載，一旦你的瀏覽器遇到 <script> 標籤，它就不能再平行下載多個項目，把它們安排在底部才能有助於加速載入你的頁面。

 

接下來把需要點擊的區塊命名為 guess_box 並把 click 事件附加上去

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Jump for joy Sale</title>
    </head>
    <body>
        <div id="header">
            <h2>Jump for joy Sale</h2>
        </div>
        <div id="main">
            <div class="guess_box"><img src="images/jump1.jpg" alt=""></div>
            <div class="guess_box"><img src="images/jump2.jpg" alt=""></div>
            <div class="guess_box"><img src="images/jump3.jpg" alt=""></div>
            <div class="guess_box"><img src="images/jump4.jpg" alt=""></div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <script>
            $(document).ready(function() {
                $(".guess_box").click(function() {
                    alert("你碰到我了！");
                });
            });
        </script>
    </body>
</html>

 

檢視需求清單，目前進度是

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

建立儲存空間

我們使用變數（ variable ）來儲存會變化的資訊（ 或資料 ），可以把變數想像成一個蘿蔔一個坑，像下面的圖一樣，坑（ 內褲 ）指的是「 變數 」，而蘿蔔（ 😳 ）就是「 值 value 」，讓你能更好管理裡面的資料。（ 更多變數內容可以參考 基本資料型態、變數 ）

一個蘿蔔一個坑

（ 圖片來源 ）

 

所以我們現在要產生名為 discount 的變數，裡頭塞從 5 到 10 隨機數的蘿蔔。

<script>
    $(document).ready(function() {
        $(".guess_box").click(function() {
            var discount = Math.floor((Math.random()*5) + 5);
            var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
        });
    });
</script>

floor 是無條件捨去小數到最接近的整數並回傳結果； random 是回傳 0 到 1 之間的隨機數，所以上面的程式碼可以得出最小數（ 0+5 ）、最大數（ 5+5 ）。

 

接下來用附加事件插入訊息

當你想要用插入頁面的方式來增加新訊息，這裡提供兩個方法：

名稱 介紹 範例
append 在元素的結尾（ 仍然在內部 ）插入內容。 append
prepend 在元素的開頭（ 仍然在內部 ）插入內容。 prepend

 

所以這裡我們要使用 append 將變數附加到 guess_box 元素下

<script>
    $(document).ready(function() {
        $(".guess_box").click(function() {
            var discount = Math.floor((Math.random()*5) + 5);
            var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
            $(".guess_box").append(discount_msg);
        });
    });
</script>

 

檢視需求清單，目前進度是

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

用 $(this) 指向當前元素

但現在發生一個錯誤！折扣訊息被重複顯示在每個 div 中，我們必須將變數僅附加在被點擊的那個 div 上，那我們該怎麼做呢？

如果我們想要「 特定地 」指出我們選擇的元素，最簡單的選擇器就是 $(this) 。
把 $(this) 想成是「 取決於情境的 」，它會隨著你在哪裡或何時使用而有所不同。

this

<script>
    $(document).ready(function() {
        $(".guess_box").click(function() {
            var discount = Math.floor((Math.random()*5) + 5);
            var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
            $(this).append(discount_msg);
        });
    });
</script>

 

檢視需求清單，目前進度是

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☑ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

使用刪除事件斬草除根

前面都運作得很好，但是我在每次點擊時都會持續得到折扣碼，要如何阻止這種事發生呢？

名稱 介紹 範例
remove 刪除被選元素及其子元素。 remove
empty 刪除被選元素的子元素。 empty

這邊我們使用 remove 讓一或多組元素從頁面上消失，然後再將具有 guess_box 類別的所有 p 標籤連根拔起，把它放在點擊事件下方，這樣就可以先移除再生成（ 順序的重要性！ ）。

$(document).ready(function() {
    $(".guess_box").click(function() {
        $(".guess_box p").remove();
        var discount = Math.floor((Math.random()*5) + 5);
        var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
        $(this).append(discount_msg);
    });
});

 

需求清單完成，可以收工了

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☑ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☑ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

這裡補充第一章提到的兩個效果

 

滑動效果

利用 slide 效果來控制 HTML 元素的 height （ 高度 ）性質。

名稱 介紹 範例
slideUp 滑上效果是改變元素的 height 性質，直到它變成 0 ，接著隱藏該元素。 slideup
slideDown 滑下效果是改變元素的 height 性質，從 0 到它在 CSS 樣式中所設定的大小。 slidedown
slideToggle 滑動切換效果指的是「 如果現在是滑上就改成滑下，反之滑下就改成滑上。 」 slidetoggle

 

淡入 / 淡出效果

利用 fade 效果來控制 HTML 元素的 opacity （ 不透明 ）和 transparency （ 透明 ）性質。

名稱 介紹 範例
fadeIn 淡入已隱藏的元素 fadein
fadeOut 淡出可見元素 fadeout
fadeToggle 淡化切換效果指的是「 如果現在元素是可見的淡出，反之隱藏的就淡入。 」 fadetoggle
fadeTo 淡化成賦予給元素的不透明度（ 值介於 0 與 1 之間 ） fadeto

 

 

參考資料

深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）


#jq #jq總務處 #深入淺出 jQuery #click #variable #floor #random #append #prepend #$(this) #remove #empty #slideUp #slideDown #slideToggle #fadeIn #fadeOut #fadeToggle #fadeTo

itiswonderfall
前端工程師
瑪莉．羅賓遜說：「每個人都可以從今天開始，創造一個全新的結局。」




Related Posts

[FE302] React 基礎 - hooks 版本：再戰 todo list 與其他 hooks

[FE302] React 基礎 - hooks 版本：再戰 todo list 與其他 hooks

 s103071049
Quick Tutorial of Linux and Workstation

Quick Tutorial of Linux and Workstation

 a113062130630210
Angular17 基於 Standalone 專案載入 Material Symbols (Google Icon)

Angular17 基於 Standalone 專案載入 Material Symbols (Google Icon)

 monoserve174

Comments